/* 版心设置 */
.container {
    width: 1190px;
    margin: 0 auto;
}


/* (1) header 的起始位置--start */
/* #region */
.header {
    width: 100%;
    height: 30px;
    background-color: #ececec;
    line-height: 30px;
}

/* .header .header-left {
    font-size: 0;
} */

.header .header-left span {
    font-size: 12px;
    margin-right: 28px;
}

.header .header-left a {
    font-size: 12px;
    /* font-weight在个别浏览器不识别  所以还是建议写bold */
    font-weight: bold;
}

.header .header-left .login {
    padding-right: 10px;
    border-right: 1px solid #666;
}

.header .header-left .register {
    margin-left: 10px;
}

.header .header-right ul li {
    float: left;
    font-size: 12px;
}

.header .header-right ul li a {
    padding: 0 15px;
    border-right: 1px solid #666;
}

.header .header-right ul li:first-child a {
    padding-left: 0;
}

.header .header-right ul li:last-child a {
    padding-right: 0;
    border-right: 0;
}

/* #endregion */
/* header 的结束位置--end */

/* (2) nav-search的起始位置 --start */
/* #region */
.nav-search {
    height: 120px;
    /* background-color: skyblue; */
}

.nav-search form {
    font-size: 0;
    margin-top: 42px;
}

.nav-search form input {
    width: 510px;
    height: 34px;
    border: 1px solid #dd302d;
}

.nav-search form button {
    width: 80px;
    height: 36px;
    background-color: #dd302d;
    border: 1px solid #dd302d;
    vertical-align: top;
    background-image: url(../img/serch_icon.png);
    background-repeat: no-repeat;
    background-position: 28px 6px;
}





/* #endregion */
/*     nav-search的结束位置 --end */

/* (3) nav 导航的起始位置 --start */
/* #region */
.nav {
    height: 48px;
    border-bottom: 1px solid #dd302d;
}

.nav .all-type {
    width: 190px;
    height: 48px;
    background-color: #dd302d;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    color: white;
}


.nav .product-type .product-type-list li {
    float: left;
    margin: 0 10px;
}

.nav .product-type .product-type-list li a {
    line-height: 48px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
/* #endregion */
/*     nav 导航的结束位置 --end */

/* (4) 主体内容--start */
/* #region */
.content {
    height: 458px;
    margin-top: 10px;
}

/* 左侧边栏 */
.content .left-aside {
    position: relative;
    width: 190px;
    height: 458px;
    background-color: #f4f4f4;
    margin-right: 10px;
}


.content .left-aside ul {
    margin: 9px 0 9px 0;
}

.content .left-aside ul li {
    height: 20px;
    /* 外边距和内边距的选择上 建议在满足宽高的情况下 我们要选择 内边距 
        因为外边距不算做盒子
    */
    padding: 4px 0 4px 16px;
    line-height: 20px;
}

.content .left-aside ul li:last-child {
    margin-bottom: 0;
}

.content .left-aside ul li a{
    font-size: 14px;
}

/* 二级菜单 */
/* 先 浮动 后调整样式 */
/* 一般情况下 嵌套了a标签  那么边框都要给a标签 */
.second-menu {
    position: absolute;
    left: 190px;
    top: 0;

    width: 700px;
    /* height: 458px; */
    min-height: 458px;
    background-color: #E3E3E3;

    display: none;
}

.second-menu dl {
    height: 36px;
    line-height: 36px;
    margin-left: 20px;
}

.second-menu dl:first-child {
    margin-top: 10px;
}

.second-menu dl dt {
    width: 70px;
    margin-right: 10px;
}

.second-menu dl dt a {
    font-size: 14px;
    color: #000;
    font-weight: bold;
}

.second-menu dl dd {
    height: 20px;
    line-height: 20px;
    padding: 8px 0;
}
.second-menu dl dd a {
    padding: 0 10px;
    border-left: 1px solid #999;
}

.second-menu dl dt,.second-menu dl dd {
    float: left;
}


.content .left-aside ul li:hover .second-menu {
    display: block;
}

.content .left-aside ul li:hover {
    background-color: #e3e3e3;
}


/* 轮播 */
.content .content-swiper {
    width: 690px;
    height: 458px;
}



/* 右侧边栏 */
.content .right-aside {
    width: 290px;
    height: 458px;
}

/* 我的思想 */
/* 我会把news分成2块一个是上  一个是下  
上的我一看就知道了 肯定是垂直居中   我就想到line-height  想到line-height 就是想到
高度  想到高度 就想到 横线的上面是多少   */

/* 写法 从外到内 从上到下 */
.content .right-aside .news {
    width: 260px;
    /* 减去了边框的2 */
    height: 156px;
    /* 290 - 2 */
    border: 1px solid #d9d9d9;
    /* 290 - 2 -28 */
    padding: 0 14px;
}

.content .right-aside .news div{
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #d9d9d9;
}


.content .right-aside .news div span {
    font-size: 14px;
}

.content .right-aside .news div a {
    font-size: 12px;
}

.content .right-aside .news ul li {
    height: 26px;
    line-height: 38px;
}


/* 设置span和a的字体大小
   li一定是等高的  所以我可以计算出他的高度 然后line-height */


/* 同学们的思想 */
/* .content .right-aside .news {
    width: 260px;
    height: 123px;
    border: 1px solid #D9D9D9;
    background-color: #ececec;
    margin-bottom: 10px;
    padding: 15px 14px 18px 14px;
}

.content .right-aside .news div {
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 10px;
}

.content .right-aside .news span {
    font-size: 14px;
    /* font-weight: bold;
    
}

.content .right-aside .news ul li {
    height: 14px;
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}

.content .right-aside .news ul li:first-child {
   margin-top: 8px;
}

.content .right-aside .news ul li:last-child {
    margin-bottom: 18px;
 }
.content .right-aside .sprites {
    width: 290px;
    height: 290px;
    background-color: skyblue;
} */


/* 精灵图 */
.sprites ul {
    padding: 16px 16px 0 16px;
    /* margin-bottom: 16px; */
}


.sprites ul li {
    float: left;
    width: 48px;
    height: 70px;
    margin: 0 11px;
    /* background-color: skyblue; */
    text-align: center;
}

.sprites ul li:first-child {
    margin-left: 0;
}

.sprites ul li:last-child {
    margin-right: 0;
}


.sprites ul li div {
    width: 48px;
    height: 48px;
    background-image: url(../img/精灵图-侧边功能.png);
}


.sprites ul:first-child li:nth-child(1) div {
    background-position: 0 0;
}

.sprites ul:first-child li:nth-child(2) div {
    background-position: -48px 0;
}

.sprites ul:first-child li:nth-child(3) div {
    background-position: -96px 0;
}

.sprites ul:first-child li:nth-child(4) div {
    background-position: -144px 0;
}


.sprites ul:nth-child(2) li:nth-child(1) div {
    background-position: 0 -48px;
}

.sprites ul:nth-child(2) li:nth-child(2) div {
    background-position: -48px -48px;
}

.sprites ul:nth-child(2) li:nth-child(3) div {
    background-position: -96px -48px;
}

.sprites ul:nth-child(2) li:nth-child(4) div {
    background-position: -144px -48px;
}

.sprites ul:nth-child(3) li:nth-child(1) div {
    background-position: 0 -48px;
}

.sprites ul:nth-child(3) li:nth-child(2) div {
    background-position: -48px -48px;
}

.sprites ul:nth-child(3) li:nth-child(3) div {
    background-position: -96px -48px;
}

.sprites ul:nth-child(3) li:nth-child(4) div {
    background-position: -144px -48px;
}


/* #endregion */
/*     主体内容--end */


/* (5) 秒杀---start */
/* #region */

.seckill {
    margin-top: 10px;
}

.seckill img {
    float: left;
    margin-right: 11px;
}

.seckill img:last-child {
    margin-right: 0;
}



/* #endregion */
/*     秒杀---end */


/* (6) 楼层1--start */
/* #region */
.floor1 {
    margin-top: 48px;
}
 
.floor1 .floor1-top {
    border-bottom: 2px solid #dd302d;
}

.floor1 .floor1-top ul li {
    float: left;
    padding: 0 10px;
    border-right: 1px solid #666;
}

.floor1 .floor1-top ul li[class] {
    color: red;
}

.floor1 .floor1-top ul li:first-child {
    padding-left: 0;
}

.floor1 .floor1-top ul li:last-child {
    border-right: 0;
    padding-right: 0;
}

.floor1 .floor1-top span {
    font-size: 20px;
    font-weight: bold;
}



/* 楼层下 */
.floor1 .floor1-bottom .item {
    float: left;
}

.floor1 .floor1-bottom .item1 {
    width: 190px;
    height: 392px;
    padding: 20px;
    background-color: #F4F4F4;
}

.floor1 .floor1-bottom .item1 ul {
    margin-bottom: 16px;
}

.floor1 .floor1-bottom .item1 ul li {
    width: 90px;
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 14px;
    border-bottom: 1px solid #D9D9D9;
}

.floor1 .floor1-bottom .item1 ul li:nth-child(2n-1) {
    float: left;
}

.floor1 .floor1-bottom .item1 ul li:nth-child(2n) {
    float: right;
}





.floor1 .floor1-bottom .item2 {
    width: 340px;
    height: 432px;
    background-color: green;
}

.floor1 .floor1-bottom .item3,.floor1 .floor1-bottom .item5 {
    width: 206px;
    height: 432px;
}

.floor1 .floor1-bottom .item4 {
    width: 206px;
    height: 432px;
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
}
/* .floor1 .floor1-bottom .item5 {
    width: 206px;
    height: 432px;
} */

.floor1 .floor1-bottom .item3 img {
    border-bottom: 1px solid #e2e2e2;
}

.floor1 .floor1-bottom .item4 img {
    border-bottom: 1px solid #e2e2e2;
}
 
.floor1 .floor1-bottom .item5 img {
    border-bottom: 1px solid #e2e2e2;
}
/* #endregion */
/*     楼层1--end */


/* (7) 页脚--start */
/* #region */
.footer {
    margin-top: 48px;
    height: 440px;
    background-color: #483E3E;
}

.footer .footer-top ul {
    width: 190px;
    height: 176px;
    float: left;
    margin-right: 10px;
    margin-top: 48px;
}

.footer .footer-top ul:last-child {
    margin-right: 0;
}

.footer .footer-top ul li a {
    color: white;
    font-size: 14px;
}

.footer .footer-middle {
    height: 1px;
    background-color: #584D4D;
}

.footer .footer-bottom {
    margin-top: 47px;
    text-align: center;
}

.footer .footer-bottom ul {
    /* text-align: center; */

    /* 千万注意 没有宽度的 块级元素 不能使用margin 0 auto */
    /* 那么我们如何让这个没有宽度的块级元素 居中呢？
       我们把这个块级元素的类型 转换为行内块元素 然后再他的父级标签中 添加
       text-align center属性
    */
    display: inline-block;
}

.footer .footer-bottom ul li {
    float: left;
}

.footer .footer-bottom ul li a {
    font-size: 12px;
    color: white;
    padding: 0 26px;
    border-right : 1px solid white ;
}

.footer .footer-bottom ul li:last-child a {
    border-right: 0;
    padding-right: 0;
}

.footer .footer-bottom ul li:nth-child(1) a {
    padding-left: 0;
}

.footer .footer-bottom .copyright {
    margin-top: 10px;
    color: white;
    font-size: 12px;
}


/* 错误案例 */
/* .footer .footer-bottom ul {
    width: 900px; */
    /* 因为没有宽度 所有不能使用 margin: 0 auto;  如果给宽 我们也很难计算*/
    /* margin: 0 auto;
} */






/* #endregion */
/*     页脚--end */
